<template>
  <a-modal v-model:open="visible" :title="title" @ok="handleOk">
    <a-form :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
      <a-form-item label="图片地址">
        <UploadComponent :value="form.img" @change="(url) => (form.img = url)" />
      </a-form-item>
      <a-form-item label="标签名称">
        <a-input v-model:value="form.active.title" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="排序">
        <a-input-number v-model:value="form.sort" placeholder="请输入" :min="0" :precision="0" />
      </a-form-item>
      <a-form-item label="状态">
        <a-switch v-model:checked="form.status" checked-value="1" un-checked-value="0" />
      </a-form-item>
      <a-form-item label="跳转">
        <a-radio-group v-model:value="form.active.type" :options="plainOptions" />
      </a-form-item>
      <a-form-item label="详情">
        <a-input v-model:value="form.active.activeId" placeholder="请输入" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import UploadComponent from '@/components/uploadComponent.vue'

defineProps<{
  title?: string
}>()

const emit = defineEmits(['update', 'cancel'])

const visible = ref(false)
const form = ref({
  img: '',
  status: '1',
  type: '1',
  sort: 1,
  video: '',
  active: {
    type: '0',
    title: '',
    activeId: '',
  },
})

const plainOptions = [
  { label: '抽奖详情', value: '0' },
  { label: '活动聚合页面', value: '1' },
]

const handleOk = () => {
  visible.value = false
  emit('update', form.value)
}

const open = (record?: typeof form.value) => {
  if (record) {
    Object.assign(form.value, record)
  } else {
    Object.assign(form.value, {
      img: '',
      status: '1',
      type: '1',
      sort: 1,
      video: '',
      active: {
        type: '0',
        title: '',
        activeId: '',
      },
    })
  }
  visible.value = true
}

defineExpose({
  open,
})
</script>
